import React, { Component } from 'react';
import { connect } from 'dva';
import styles from './ListContent.less';

import VideoList from './components/VideoList';
import Link from 'umi/link';

@connect(({ law, video }) => ({
  lawList: law.lawList,
  video: law.video,
}))
class ListContent extends Component {
  state = {
    reportsTabSelected: 0,
  };

  componentDidMount() {
    this.setState({ loading: false });
    const { dispatch } = this.props;
    dispatch({
      type: 'law/queryLawList',
      payload: {
        page_num: 1,
        page_size: 11,
      },
    });
    dispatch({
      type: 'law/queryVideo',
      payload: {},
    });
  }

  render() {
    let { lawList, video } = this.props;

    let generateLawList = () => {
      let res = [];
      if (lawList && lawList.data_list) {
        for (let i = 0; i < lawList.data_list.length; i++) {
          res.push(
            <li key={'zzdlist-' + i} className={styles.ellipsisLi}>
              <span className={styles.zzdDot}>•</span>
              <a
                className={styles.articlesLink}
                // href={lawList.data_list[i].annex_info[0].annex_url}
                target="_blank"
              >
                {lawList.data_list[i].title}
              </a>
            </li>
          );
        }
      }
      return res;
    };

    return (
      <div className={styles.outerWidthLim}>
        <div className={styles.breadCrumbContainer}>
          <Link to="/Law/ListContent">
            <div className={styles.breadCrumbButton + ' ' + styles.breadCrumbButtonActive}>
              最新政策
            </div>
          </Link>
          <Link to="/Law/NoticeTable">
            <div className={styles.breadCrumbButton}>监管通知公告</div>
          </Link>
          <Link to="/Law/SearchCollection/regulatoryLetters">
            <div className={styles.breadCrumbButton}>检索收藏</div>
          </Link>
        </div>
        <div className={styles.mainContentContainer}>
          <div className={styles.contentCard + ' ' + styles.bigContent}>
            <div className={styles.cardHeader}>
              <div className={styles.cardHeaderTitle}>最新政策解读</div>
              <Link to="/Headlines/MoreVideos">
                <div className={styles.moreButton}>更多</div>
              </Link>
            </div>
            <div className={styles.cardContent}>
              <video
                src={video && video.data_list ? video.data_list[0].url_list[0] : ''}
                controls="controls"
                style={{ width: '100%', height: '100%', float: 'left' }}
              />
            </div>
          </div>
          <div className={styles.contentCard + ' ' + styles.smallContent}>
            <div className={styles.cardHeader}>
              <div className={styles.cardHeaderTitle}>新出政策</div>
            </div>
            <div className={styles.cardContent}>
              <ul className={styles.noLeftPadding} id="news">
                {generateLawList()}
              </ul>
            </div>
          </div>
          <div className={styles.videoListContainer}>
            <VideoList />
          </div>
        </div>
      </div>
    );
  }
}

export default ListContent;
